<template>
	<div style="margin: 30px;">
		<el-form :inline="true" :model="formInline" class="demo-form-inline" >
		  <el-form-item label="来源">
		    <el-select v-model="formInline.platformCode" placeholder="全部">
		      <el-option v-for="item in option1" :label="item.platformCode" :value="item.platformCode" :key='item.plateformCode'></el-option>
		    </el-select>
		  </el-form-item>
		  <el-form-item label="项目类别">
		    <el-input v-model="formInline.projectType" ></el-input>
		  </el-form-item>
		  <el-form-item label="项目名称">
		    <el-input v-model="formInline.name" ></el-input>
		  </el-form-item>
		    <el-form-item label="项目时间" prop="phone">
			    <el-date-picker
			      v-model="time"
			      type="datetimerange"
			      :picker-options="pickerOptions2"
			      range-separator="至"
			      start-placeholder="开始日期"
			      end-placeholder="结束日期"
			      align="right">
			    </el-date-picker>
		  </el-form-item>
		  <el-form-item style='float: right;'>
		    <el-button type="primary" @click="getRecord" :disabled='disabled1'>搜索</el-button>
		    <el-button type="primary" @click="getRecord" :disabled='disabled2'>全部</el-button>
		  </el-form-item>
		</el-form>
		<el-table
	    :data="tableData3"
	    height="500"
	    border
	    v-loading='loading'>
	    <el-table-column type='index'
	      label="序号"
	      :index="indexMethod"
	    align='center'
	      width="80">
	    </el-table-column>
	    <el-table-column
	      align='center'
	      label="来源">
	      <template slot-scope="scope">
			 {{scope.row.platformCode[0]}}
		</template>
	    </el-table-column>
	    <el-table-column
	      prop="name"
	      align='center'
	      label="项目名称"
	      >
	    </el-table-column>
	    <el-table-column
	      prop="projectType"
	      align='center'
	      label="项目类别"
	      >
	    </el-table-column>
	    
	    <el-table-column
	      prop="trainMethod"
	      align='center'
	      label="培训方式"
	      >
	    </el-table-column>
	    
	    <el-table-column
	      prop="trainType"
	      align='center'
	      label="培训类型"
	      >
	    </el-table-column>
	    <el-table-column align="center" label="项目时间" width="380">
			<template slot-scope="scope" v-if="scope.row.beginTime">
				{{scope.row.beginTime}}-{{scope.row.endTime}}
			</template>
		</el-table-column>
	    <el-table-column
	      prop="peopleNum"
	      align='center'
	      label="参与人数"
	      >
	    </el-table-column>
	    <el-table-column align="center" label="操作" width='100'>
			<template slot-scope="scope">
				<el-button @click='goDetail(scope.row.projectId)' >详情</el-button>
			</template>
	    </el-table-column>
	   
	  </el-table>
	  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size='20' layout="total,sizes,prev,pager,next,jumper" :total="total"></el-pagination>
	  <div>
	  	<el-dialog title='' :visible.sync='flag' width='90%' >
	  		<h3 style="text-align: center;">培训班详情</h3>
	  		<el-form :inline="true" :model="formInline" class="demo-form-inline">
			  <el-form-item label="成绩状态">
			    <el-select v-model="formInline.isPassed" placeholder="全部">
			      <el-option v-for="item in option2" :label="item.isPassed" :value="item.isPassed" :key='item.isPassed'></el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item label="">
			    <el-input v-model="formInline.userName"  placeholder="请输入姓名"></el-input>
			  </el-form-item>
			  
			  <el-form-item style='float: right;'>
			    <el-button style="background: greenyellow;color:#fff;" @click="getRecordDetail" :disabled='disabled3'>搜索</el-button>
			    <el-button  @click="getRecord" :disabled='disabled4'>全部</el-button>
			  </el-form-item>
			</el-form>
			<el-table
		    :data="tableData2"
		    height="500"
		    border
		    v-loading='loading'>
		    <el-table-column type='index'
		      label="序号"
		      :index="indexMethod"
		    align='center'
		      width="80">
		    </el-table-column>
		    <el-table-column
		      prop="userName"
		      align='center'
		      label="姓名"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="companyName"
		      align='center'
		      label="单位名字"
		      >
		    </el-table-column>
		    
		    
		    <el-table-column
		      prop="learnDuration"
		      align='center'
		      label="应修学时（min）"
		      >
		    </el-table-column>
		    <el-table-column
		      align='center'
		      label="学习进度"
		      >
		      <template slot-scope="scope">
				{{scope.row.progress*100}}%
			</template>
		    </el-table-column>
		    <el-table-column
		      prop="score"
		      align='center'
		      label="考试成绩"
		      >
		    </el-table-column>
		    <el-table-column
		      align='center'
		      label="成绩状态"
		      >
		      <template slot-scope="scope">
		      	<p v-if="scope.row.isPassed == '0'" style="color: red;">不合格</p>
				<p v-else style="color: green;">合格</p>
			</template>
		    </el-table-column>
		  </el-table>
		  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size='20' layout="total,sizes,prev,pager,next,jumper" :total="total"></el-pagination>
		  
	  	</el-dialog>
	  </div>
	</div>	
</template>
<script>
	import {mapState} from 'vuex'
	import MD5 from 'md5'
	export default {
    data() {
      return {
      	 option1:[
          	{'platformCode':"20180830"},
          	{'platformCode':"1234R324"},
          	
          ],
          option2:[
          	{'isPassed':"合格"},
          	{'isPassed':"不合格"},
          	
          ],
      	currentPage:1,
      	total:0,
      	disabled1:false,
      	disabled2:false,
      	disabled3:false,
      	disabled4:false,
      	currentPage2:1,
      	total2:0,
      	flag:false,
      	limit:20,
      	limit2:20,
      	loading:false,
      	loading2:false,
      	 formInline: {
      	 	platformCode:'',
      	 	beginTime:'',
      	 	endTime:'',
      	 	projectType:'',
      	 	name:'',
      	 	isPassed:'',
      	 	id:'',
      	 	userName:''
        },
         tableData3: [],
         tableData2: [],
       pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        time: ''
      };
    },
     computed:{
    	...mapState({
    		detailMessage:'detailMessage'
    	})
    },
    methods: {
    	goDetail(id){
    		this.flag=true
    		this.formInline.id=id
    		this.getRecordDetail()
    	},
    	indexMethod(index){
    		return this.limit*(this.currentPage-1)+index+1
    	},
    	handleSizeChange(val){
    		this.limit = val
    		this.getRecord()
    	},
    	handleCurrentChange(val){
    		this.currentPage = val
    		this.getRecord()
    	},
    	changeTime(t){
    		var date = new Date(t);  
    		var str =date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();  
    		return str
    	},
    	getRecordDetail(id){
      	let that = this
      	this.disabled3=true
      	let timestamp = Date.parse(new Date())
      	alert(this.formInline.isPassed)
      	let param = {
      		        'userName':this.formInline.userName,
      		        'isPassed':Number((this.formInline.isPassed=='不合格' ? '0' : '1')), 
		      		'projectId':this.formInline.id,
					'pageSize':this.limit2,
					'pageNum':this.currentPage2
				}
      	console.log(param)
        Object.keys(param).forEach(function(key){
        	if(param[key]=='' || (!param[key])){
        		delete param[key]
        	}
        })
        let reqUrl = localStorage.getItem('ApiUrl')+'/idc/company/projectDetails'   
        this.$ajax.post(reqUrl,param,{headers:{
						'Content-Type':'application/json',
						'platformCode':'20180830',
						'authorization':MD5('1idc89757'),
						'timestamp':'1'
						
					}
        })
        
        .then(function(res){
			that.loading=false
			that.disabled3=false
			let obj = res.data
			if(obj.code==200){
				that.tableData2=obj.data.list
				that.total2 = obj.data.total
			}else{
				that.$message({
					message:obj.message,
					duration:5000
				})
			}
        })
        .catch((err)=>{
        	console.log(err)
        })
      },
      getRecord(){
      	var str = this.time
      	let that = this
      	let timestamp = Date.parse(new Date())
      	this.disabled1=true
      	let param = {
		      		'platformCode':this.formInline.platformCode,
		      	 	'beginTime':'',
		      	 	'endTime':'',
		      	 	'projectType':this.formInline.projectType,
		      	 	'name':this.formInline.name,
					//"companyCode":"1535616441742",
					'companyCode':this.detailMessage.code,
					'pageSize':this.limit,
					'pageNum':this.currentPage
				}
      	if(this.time!=''){
      		param.beginTime=this.changeTime(this.time[0])
      		param.endTime = this.changeTime(this.time[1])
      	}
        Object.keys(param).forEach(function(key){
        	if(param[key]=='' || (!param[key])){
        		delete param[key]
        	}
        })
        let reqUrl = localStorage.getItem('ApiUrl')+'/idc/company/projectInfo'   
        this.$ajax.post(reqUrl,param,{headers:{
						'Content-Type':'application/json',
						'platformCode':'20180830',
						'authorization':MD5('1idc89757'),
						'timestamp':'1'
						
					}
        })
        
        .then(function(res){
			that.loading=false
			that.disabled1=false
			let obj = res.data
			if(obj.code==200){
				that.tableData3=obj.data.list
				that.total = obj.data.total
			}else{
				that.$message({
					message:obj.message,
					duration:5000
				})
			}
        })
        .catch((err)=>{
        	console.log(err)
        })
      }
    },
    mounted(){
    	this.getRecord()
    }
  };
</script>